<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>网络服务平台</title>
    <link rel="stylesheet" type="text/css" href="../../../../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../../js/easyui/themes/icon.css">
    <script type="text/javascript" src="../../../../js/easyui/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#videoGrid').datagrid({
                title:'视频列表',
                iconCls:'icon-save',
                width:"100%",
                height:380,
                nowrap: false,
                striped: true,
                collapsible:true,
                url:'/management/video/fetchVideos.action',
                queryParams:{},
                remoteSort: false,
                idField:'id',
                frozenColumns:[
                    [
                        {field:'ck',checkbox:true},
                        {"width":350,"field":"name","title":"标题",
                            formatter:function(value, rowData, rowIndex) {
                                return '<a target="_blank" href="/management/video/previewVideo.action?id=' + rowData.id + '">' + value + '</a>';
                            }
                        }
                    ]
                ],
                columns:[
                    [
                        {"width":240,"field":"location","title":"位置"},
                        {"width":140,"field":"createDateTime","title":"发布日期"},
                        {"width":80,"field":"id","title":"操作",
                            formatter:function(value, rowData, rowIndex) {
                                <s:if test="1 == #session._user_role_">
                                return '<a onclick="deleteVideo(\'' + value + '\');" href="#">删除</a>';
                                </s:if>
                                <s:else>
                                return '';
                                </s:else>

                            }
                        }
                    ]
                ],
                pagination:true,
                rownumbers:true,
                toolbar:[
                    {"iconCls":"icon-add","handler":function() {
                        addVideo();
                    },"text":"添加视频","title":"添加视频","id":"btnAdd"},
                    {"iconCls":"icon-edit","handler":function() {
                        editVideo();
                    },"text":"编辑视频","title":"编辑视频","id":"btnEdit"}
                ]
            });

            var p = $('#videoGrid').datagrid('getPager');
            if (p) {
                $(p).pagination({
                    onBeforeRefresh:function() {
                        //	alert('before refresh');
                    }
                });
            }
        });

        function addVideo() {
            $('#videoForm').form('clear');
            $('#itemEditorDialog').show();
            $('#itemEditorDialog').dialog({
                title:'添加视频',
                modal:true
            });
        }

        function createVideo() {
               $("#videoForm").form('submit', {
                onSubmit:function() {
                    return $(this).form('validate');
                },
                success:function(data) {
                    data = eval('(' + data + ')');

                    if (!data.successful) {
                        alert('not true');
                        return;
                    }

                    $.messager.show({
                        title:'提示信息',
                        msg:'保存成功！'
                    });

                    closeVideoForm();
                    query();
                }
            });
        }

        function editVideo() {
            var node = $('#videoGrid').datagrid('getSelected');
            var rows = $('#videoGrid').datagrid('getSelections');

            if (rows.length != 1) {
                $.messager.alert('警告', '请选择一条记录!', 'warning');
                return;
            }

            $('#videoForm').form('clear');

            $('#videoForm').form('load', {
                'videoForm.id':node.id,
                'videoForm.name':node.name,
                'videoForm.location':node.location,
                'videoForm.viewTime':node.viewTime,
                'videoForm.createDateTime':node.createDateTime
            });

            $('#itemEditorDialog').show();
            $('#itemEditorDialog').dialog({
                title:'编辑视频',
                modal:true
            });
        }

        function query() {
            var videoName = $("#videoName").val();
            var queryParams = $('#videoGrid').datagrid('options').queryParams;
            queryParams.videoName = videoName;
            $('#videoGrid').datagrid('options').queryParams = queryParams;
            $("#videoGrid").datagrid('reload');
        }
        function deleteVideo(id) {
            $.messager.confirm('删除视频', '你确定要删除视频吗？', function(data) {
                if (!data) {
                    return;
                }

                $.getJSON("/management/video/deleteVideo.action?id=" + id, function(data1) {
                    if (data1.successful) {
                        $.messager.show({
                            title:'提示信息',
                            msg:'删除视频成功！'
                        });
                    } else {
                        $.messager.show({
                            title:'提示信息',
                            msg:'删除视频失败！' + data1.errorMessage
                        });
                    }

                    query();
                });
            });
        }
        function closeVideoForm() {
            $('#itemEditorDialog').dialog('close');
        }
    </script>

</head>

<body class="easyui-layout">

<div region="center" style="height:600px;padding:10px;background:#efefef;">
    <div id="p" class="easyui-panel" title="视频搜索" icon="icon-search" style="height:80px;padding:10px;">
        <table>
            <tr>
                <td><label>标题:</label></td>
                <td><input name="videoName" id="videoName"/></td>
                <td style="width:30px"></td>
                <td><a class="easyui-linkbutton" onclick="query()">搜索</a></td>
            </tr>
        </table>
    </div>
    <div id="p1" class="easyui-panel" style="height:400px;">`
        <table id="videoGrid"></table>
    </div>
</div>

<div id="itemEditorDialog" icon="icon-save" title="视频管理" style="height:400;width:400;display:none;padding:5px;">
    <form method="post" action="/management/video/videoForm.action" id="videoForm" name="videoForm">
        <table>
            <tr>
                <td><label>视频名称：</label></td>
                <td><input class="easyui-validatebox" id="name" name="videoForm.name" required="true"/></td>
            </tr>
            <tr>
                <td><label>视频地址：</label></td>
                <td><input class="easyui-validatebox" name="videoForm.location" required="true"/></td>
            </tr>
        </table>
        <div class="toolbar" style="padding:10px;">
            <a href="#" onclick="createVideo()" class="easyui-linkbutton" iconCls="icon-ok">确定</a>
            <a href="#" onclick="closeVideoForm()" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
        </div>
        <input type="hidden" name="videoForm.id"/>
        <input type="hidden" name="videoForm.viewTime" value="0"/>
        <input type="hidden" name="videoForm.createDateTime"/>
    </form>
</div>

</body>
</html>